<template>
  <el-form ref="searchRef" :model="searchFormData">
    <el-form-item label="容器" style="width: 200px">
      <el-select v-model="searchFormData.containerId" @change="handleChange">
        <el-option v-for="(item,index) in containers" :label="item.containerName" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div style="width: 100%;height: calc(100% - 60px);border: 1px solid #dcdfe6;">
    <div style="display: flex;">
      <div @click="switchTags(index)" class="param_top_item" v-for="(item,index) in tags"
        :class="{
          'param_top_item_focus' : index == focusIndex
        }"
      >
       {{item.name}}
      </div>
    </div>
    <component ref="paramsItemRef" :is="currentComponent" ></component>
  </div>

</template>
<script setup>
import {computed, inject, nextTick, reactive, ref} from "vue";
import BaseInfo from '@/components/page/container/param/BaseInfo.vue'
import Resource from '@/components/page/container/param/Resource.vue'
import Volume from '@/components/page/container/param/Volume.vue'
import Network from '@/components/page/container/param/Network.vue'
import ParamFile from '@/components/page/container/param/ParamFile.vue'
import EnvParam from '@/components/page/container/param/EnvParam.vue'
import Customer from '@/components/page/container/param/Customer.vue'
import {AXIOS_NAME} from '@/constant/constant.js'

const paramsItemRef = ref(null);
const $axios = inject(AXIOS_NAME);
const containers = reactive([]);
const searchFormData = reactive({
  "containerId": ''
})

let focusIndex = ref(0);
const tags = reactive([
  {"name":"基本信息",component: BaseInfo},
  {"name":"资源分配",component: Resource},
  {"name":"挂载配置",component: Volume},
  {"name":"网络配置",component: Network},
  {"name":"docker环境变量",component: EnvParam},
  {"name":"参数文件",component: ParamFile},
  {"name":"自定义",component: Customer},
]);


const currentComponent = ref(BaseInfo);
const containerId=  ref(null);

const handleChange = (val) => {
  setTabItemFormData(val);
}

const setTabItemFormData = (val) =>{
  for(const item of containers){
    if(item.id == val){
      nextTick(()=> {
        paramsItemRef.value.setData(item);
      })
    }
  }
}

const switchTags = (index) => {
  focusIndex.value = index;
  currentComponent.value = tags[index].component;
  setTabItemFormData(searchFormData.containerId);
}

const getContainerList = () =>{
  $axios.post("/deploy/getNoDeployedContainerList").then(response => {
    const data = response.data;
    if(data.code == 1){
      containers.pushAll(data.data);
    }
  });
}
getContainerList();
</script>

<style scoped>
  .param_top_item{
    padding: 2px 12px;
    width: auto;
    color: #606266;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-top: none;
    height: 30px;
    line-height: 30px;
    background-color: #F7F8FA;
    cursor: pointer;
  }
  .param_top_item_focus{
    background-color: white;
    border: none;
  }
</style>